<template>
	<div>
		<map v-if="show" id="myMap" :latitude="latitude" :longitude="longitude" :markers="markers" show-location>
		</map>
		<div class="mask">
			<div class="left">
				<div class="name">{{storeInfo.storeName}}</div>
				<div class="address">{{storeInfo.storeAddressDetail}}</div>
			</div>
			<div class="right">
				<image class="image" src="/static/icon-daohang.png" mode="aspectFill" @click="getCenterLocation">
				</image>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getStoreBaseInfo,
	} from "@/api/store.js";
	export default {
		data() {
			return {
				latitude: 39.914935,
				longitude: 116.403981,
				markers: [],
				storeInfo: {},
				show: false
			};
		},
		onReady(e) {

		},
		async onLoad(options) {
			this.id = options.id
			let res = await getStoreBaseInfo(this.id);
			if (res.data.success) {
				let result = res.data.result
				this.latitude = parseFloat(result.lat)
				this.longitude = parseFloat(result.lon)
				let marker = {
					id: 1,
					latitude: parseFloat(result.lat),
					longitude: parseFloat(result.lon),
					iconPath: '',
					width: 40,
					height: 40
				}
				console.log('111', marker)
				this.markers = [marker]
				console.log('222', marker)
				console.log('333', this.markers)
				this.show = true
				setTimeout(() => {
					this.mapCtx = wx.createMapContext('myMap')
				}, 200)
				this.storeInfo = result
			}
		},
		methods: {
			//获取当前地图中心的经纬度
			getCenterLocation() {
				uni.showLoading({
					title: '正在跳转导航...'
				})
				//创建 map 上下文 MapContext 对象。
				this.mapCtx = wx.createMapContext('myMap')
				this.mapCtx.openMapApp({
					latitude: this.markers[0].latitude, //目标地址的纬度
					longitude: this.markers[0].longitude, //目标地址的经度
					destination: this.storeInfo.storeAddressDetail, //目标地址详情（将显示在弹出框顶部）
					success(res) {
						uni.hideLoading()
						console.log(res)
					},
					fail(res) {
						uni.hideLoading()
						console.log(res)
					},
					complete(res) {
						uni.hideLoading()
						console.log(res)
					}
				})
			},
		},
	};
</script>
<style lang="scss" scoped>
	map {
		width: 100vw;
		height: 100vh;
	}

	.mask {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24upx;
		box-sizing: border-box;
		height: 200upx;
		background-color: #ffffff;
		border-top-left-radius: 16upx;
		border-top-right-radius: 16upx;
		z-index: 999;
		display: flex;
		align-items: center;

		.left {
			flex: 1;

			.name {
				font-size: 32upx;
			}

			.address {
				margin-top: 16upx;
				font-size: 26upx;
				color: #999999;
			}
		}

		.right {
			margin-left: 24upx;
			flex: 0 0 100upx;

			.image {
				width: 100upx;
				height: 100upx;
			}
		}
	}
</style>
